<template>
  <scroll-view :scroll-y="true" class="h-11/12 m-auto w-11/12">
    <uni-forms :modelValue="formData">
      <!-- 加工食品名称 -->
      <uni-card title="加工食品名称" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.jiaGongShiPinMingCheng" />
        </uni-forms-item>
      </uni-card>
      <!-- 加工食品重量 -->
      <uni-card title="加工食品重量(g)" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.jiaGongShiPinZhongLiang" />
        </uni-forms-item>
      </uni-card>
      <!-- 食品添加剂名称 -->
      <uni-card title="食品添加剂名称" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.shiPinTianJiaJiMingCheng" />
        </uni-forms-item>
      </uni-card>
      <!-- 食品添加剂批次或生产日期 -->
      <uni-card title="食品添加剂批次或生产日期" extra="必填*">
        <uni-forms-item>
          <uni-datetime-picker
            type="date"
            :clear-icon="false"
            v-model="formData.date"
          />
        </uni-forms-item>
      </uni-card>
      <!-- 食品添加剂现存量(g) -->
      <uni-card title="食品添加剂现存量(g)" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.shiPinTianJiaJiXianCunLiang" />
        </uni-forms-item>
      </uni-card>
      <!-- 食品添加剂实际添加量(g) -->
      <uni-card title="食品添加剂实际添加量(g)" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.shiPinTianJiaJiShiJiTianJiaLiang" />
        </uni-forms-item>
      </uni-card>
      <!-- 食品添加剂剩余量(g) -->
      <uni-card title="食品添加剂剩余量(g)" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.shiPinTianJiaJiShengYuLiang" />
        </uni-forms-item>
      </uni-card>
      <!-- 使用者签字 -->
      <uni-card title="使用者签字" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.shiYongZheQianZi" />
        </uni-forms-item>
      </uni-card>
    </uni-forms>
    <ConfigComponent
      @clearFormData="clearFormData"
      @updateFormData="updateFormData"
      :formData="formData"
      name="tianJiaJiShiYong"
    />
  </scroll-view>
</template>

<script lang="ts" setup>
import { getTodayDate } from '@/utils/utils';
import { ref } from 'vue';
import ConfigComponent from '@/components/ConfigComponent/ConfigComponent.vue';

// 表格提交信息
const formData = ref({
  jiaGongShiPinMingCheng: '', //加工食品名称
  jiaGongShiPinZhongLiang: '', //加工食品重量
  shiPinTianJiaJiMingCheng: '', //食品添加剂名称
  date: ref(getTodayDate()).value, //食品添加剂批次或生产日期
  shiPinTianJiaJiXianCunLiang: '', //食品添加剂现存量(g)
  shiPinTianJiaJiShiJiTianJiaLiang: '', //食品添加剂实际添加量(g)
  shiPinTianJiaJiShengYuLiang: '', //食品添加剂剩余量(g)
  shiYongZheQianZi: '', //使用者签字
});
// 清空表单数据
const clearFormData = () => {
  formData.value = {
    jiaGongShiPinMingCheng: '', //加工食品名称
    jiaGongShiPinZhongLiang: '', //加工食品重量
    shiPinTianJiaJiMingCheng: '', //食品添加剂名称
    date: ref(getTodayDate()).value, //食品添加剂批次或生产日期
    shiPinTianJiaJiXianCunLiang: '', //食品添加剂现存量(g)
    shiPinTianJiaJiShiJiTianJiaLiang: '', //食品添加剂实际添加量(g)
    shiPinTianJiaJiShengYuLiang: '', //食品添加剂剩余量(g)
    shiYongZheQianZi: '', //使用者签字
  };
};
// 更新表单数据
const updateFormData = (data: any) => {
  formData.value = data;
};
</script>

<style lang="scss" scoped>
::v-deep.uni-card {
  .uni-card__header {
    .uni-card__header-extra {
      .uni-card__header-extra-text {
        color: #ff0000;
      }
    }
  }
}
</style>
